<template>
  <div>
    <!-- 全局组件Category -->
    <Category :scene="scene"></Category>
    <!-- 下方列表 -->
    <el-card shadow="always" style="margin: 20px 0">
      <!-- 场景一:spu列表页面 -->
      <div v-show="scene == 0">
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          @click="addSpu"
          :disabled="!categoryStore.c3Id"
          >添加SPU</el-button
        >
        <el-table border stripe style="margin: 20px 0" :data="spuList.records">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          >
          </el-table-column>
          <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
          <el-table-column
            label="SPU描述"
            prop="description"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                :icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                :icon="InfoFilled"
                title="查看SKU"
                @click="seeSku(row)"
              ></el-button>
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                title="删除SPU"
                @click="deleteSpu(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="getSpuList"
          @size-change="sizeChangeHandler"
          v-model:current-page="currentPage"
          :page-sizes="[3, 5, 7]"
          v-model:page-size="pageSize"
          layout=" prev, pager, next, jumper, ->,sizes,total"
          :total="spuList.total"
          background
          :pager-count="7"
        >
        </el-pagination>
      </div>
      <!-- 添加|修改spu页面 -->
      <!-- 使用ref来让父组件获取到子组件对象(从而可以直接更新数据|调用其方法更新数据) -->
      <Spu
        v-show="scene == 1"
        @changeScene="changeSceneHandler"
        ref="spuRef"
      ></Spu>
      <!-- 查看sku页面 -->
      <Sku
        v-show="scene == 2"
        ref="skuRef"
        @changeScene="changeSceneHandler"
      ></Sku>
      <!-- 对话框中展示表格  此处v-model绑定的值用于设置对话框的显示与隐藏 -->
      <el-dialog v-model="dialogTableVisible" title="SKU信息">
        <el-table border :data="skuList">
          <el-table-column prop="skuName" label="名称" width="150" />
          <el-table-column prop="price" label="价格(元)" width="200" />
          <el-table-column prop="weight" label="重量(千克)" />
          <el-table-column label="默认图片">
            <template #="{ row, $index }">
              <img
                :src="row.skuDefaultImg"
                alt=""
                style="width: 70px; height: 90px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 引入icon图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  //加号
  Plus,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ref, watch, onUnmounted } from "vue";
// 引入仓库
import useCategoryStore from "@/stores/category";
// 引入接口
import { reqDeleteSpu, reqSeeSkuList, reqSpuList } from "@/api/product/spu/spu";
// 引入子组件
import Spu from "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
import { ElMessage } from "element-plus";
let categoryStore = useCategoryStore();
// 定义响应式数据
let scene = ref<number>(0);
let currentPage = ref<number>(1);
let pageSize = ref<number>(3);
// 定义服务器返回的数据
let spuList = ref({});
// 存储子组件spu对象(即子组件实例)
let spuRef = ref<any>();
let skuRef = ref<any>();

// 定义对话框显示与隐藏的数据
let dialogTableVisible = ref<boolean>(false);

// 定义查看SKU时服务器返回的数据,注:el-table绑定的是一个数组,所以在定义响应式数据类型时不要写错
let skuList = ref([]);

// 监听三级分类id的变化
watch(
  () => categoryStore.c3Id,
  () => {
    // 三级分类的id不能为空
    if (categoryStore.c3Id == "") return;
    getSpuList();
  }
);
// 获取SPU列表
const getSpuList = async (pager: number = 1) => {
  // 整理参数
  currentPage.value = pager;
  let result = await reqSpuList(
    currentPage.value,
    pageSize.value,
    categoryStore.c3Id
  );
  console.log(result);
  spuList.value = result;
};

// 点击下拉框选择一页展示多少条数据
const sizeChangeHandler = (pages: number) => {
  // 整理参数(可不做,以为v-model绑定了)
  pageSize.value = pages;
  // 发请求
  getSpuList();
};
// 点击添加SPU按钮的回调
const addSpu = () => {
  // 切换场景为 1
  scene.value = 1;
  spuRef.value.initAddSpu(categoryStore.c3Id);
};
// 点击修改SPU的回调
const updateSpu = (row) => {
  scene.value = 1;
  // 调用子组件上的方法,点击修改即可发送请求,使子组件得到数据
  spuRef.value.initSpuData(row);
};

// 父子组件通信,切换场景
const changeSceneHandler = ({ scenes, whichOne }) => {
  // 切换场景
  scene.value = scenes;
  // 判断是添加SPU还是修改SPU
  if (whichOne == "add") {
    // 添加,默认返回第一页
    getSpuList();
  } else if (whichOne == "update") {
    // 修改,默认返回当前页
    getSpuList(currentPage.value);
  }
};

// 添加SKU的回调
const addSku = (row) => {
  // 切换场景
  scene.value = 2;
  // 调用子组件的方法
  skuRef.value.initSku(categoryStore.c1Id, categoryStore.c2Id, row);
};

// 查看SKU的回调
const seeSku = async (row) => {
  // 点击显示对话框
  dialogTableVisible.value = true;
  // 发请求
  let result = await reqSeeSkuList(row.id);
  // 存储数据
  console.log(result);
  skuList.value = result;
};

// 删除SPU的回调
const deleteSpu = async (row) => {
  try {
    await reqDeleteSpu(row.id);
    // 提示信息
    ElMessage({
      type: "success",
      message: "删除成功",
      duration: 500,
    });
    // 再次发请求获取最新数据
    getSpuList();
  } catch (error) {
    ElMessage({
      type: "error",
      message: "删除失败",
      duration: 500,
    });
  }
};

// 组件卸载时清空数据
onUnmounted(() => {
  // 组件销毁时,清除仓库中的数据
  categoryStore.c1Id = "";
  categoryStore.c2Id = "";
  categoryStore.c3Id = "";
  categoryStore.C1List = [];
  categoryStore.C2List = [];
  categoryStore.C3List = [];
});
</script>

<style scoped>
</style>